<template>
  <el-card style="margin-top: 15px">
    <template v-if="!handleType">
      <el-button
        type="primary"
        @click="handleAdd"
        icon="Plus"
        :disabled="disabledAddFlag"
      >
        添加属性
      </el-button>
      <el-table :data="dataList" border style="margin-top: 15px">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="属性名" prop="attrName" align="center" />
        <el-table-column label="属性值" prop="attrValueList" align="center">
          <template #default="{ row }">
            <el-tag
              v-for="(item, index) in row.attrValueList"
              :key="index"
              style="margin: 0 5px"
            >
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="Edit"
              size="small"
              @click="handleEdit(row)"
            />
            <el-button type="danger" icon="Delete" size="small" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else>
      <el-form :inline="true" :model="dataForm" class="demo-form-inline">
        <el-form-item label="属性名称">
          <el-input v-model="dataForm.attrName" placeholder="请输入属性名称" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="handleAddValue"
        icon="Plus"
        :disabled="!dataForm.attrName"
      >
        添加属性值
      </el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
      <el-table :data="dataForm.attrValueList" border style="margin-top: 15px">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="属性值" prop="attrValueList" align="center">
          <template #default="{ row }">
            <el-input
              ref=""
              v-model="row.valueName"
              placeholder="请输入属性值"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="{ $index }">
            <!-- <el-button
              type="primary"
              icon="Edit"
              size="small"
              @click="handle(row)"
            /> -->
            <el-button
              type="danger"
              icon="Delete"
              size="small"
              @click="handleDelete($index)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-button
          type="primary"
          @click="handleSubmit"
          :disabled="dataForm.attrValueList.length === 0"
        >
          保存
        </el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </div>
    </template>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from 'vue'
import { getAttrInfoList, addAttrInfo } from '@/api/product/attr'
import type { IAttrInfo, IAttrInfoData } from '@/api/product/attr/type'
import { ElMessage } from 'element-plus'

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
})
const disabledAddFlag = ref<boolean>(false)
let dataList = ref<IAttrInfoData[]>([])
const handleType = ref<string>('')

const dataForm = ref<IAttrInfoData>({
  attrName: '',
  attrValueList: [],
  categoryId: props.form.id3,
  id: null,
  categoryLevel: 3,
})

// 添加
const handleAdd = () => {
  handleType.value = 'add'
}

// 添加属性值
const handleAddValue = () => {
  dataForm.value.attrValueList.push({
    flag: false,
    valueName: '',
  })
}

// 删除属性值
const handleDelete = (index: number) => {
  dataForm.value.attrValueList.splice(index, 1)
}

const handleSubmit = async () => {
  dataForm.value.categoryId = props.form.id3
  await addAttrInfo(dataForm.value)
  if (!dataForm.value.id) {
    ElMessage.success('添加成功')
  } else {
    ElMessage.success('编辑成功')
  }
  cancel()
  getAttrInfoLists()
}

// 监听三个下拉框，都选择查询表格数据
watch(
  () => props.form,
  (val): void => {
    if (val.id1 && val.id2 && val.id3) {
      disabledAddFlag.value = false
      getAttrInfoLists()
    } else {
      dataList.value = []
      disabledAddFlag.value = true
    }
  },
  { deep: true, immediate: true },
)

// 查询表格数据
const getAttrInfoLists = async () => {
  const { id1, id2, id3 } = props.form
  const data: IAttrInfo = {
    category1Id: id1,
    category2Id: id2,
    category3Id: id3,
  }
  const res = await getAttrInfoList(data)
  dataList.value = res.data || []
}

const cancel = () => {
  handleType.value = ''
  dataForm.value.attrName = ''
  dataForm.value.attrValueList = []
}

const handleEdit = (row: IAttrInfoData) => {
  handleType.value = 'edit'
  dataForm.value = row
}
</script>
<style lang="scss" scoped></style>
